<template>
  <div class="wrap robotInfo">
    <el-form label-position="top" ref="form" :model="form" class="form" :rules="rules">
      <el-form-item :label="$t('public.nickName')" prop="name">
        <el-input size="mini" v-model.trim="form.name"></el-input>
      </el-form-item>
      <span class="help-tips">*{{$t('configLazyLoad.robotSeven.textLimit')}}</span>
      <el-form-item :label="$t('configLazyLoad.robotSeven.passTheLibrary')" class="padding-top">
        <el-radio-group v-model.trim="form.common">
          <el-radio  :label="true">{{$t('config.channel.enabled')}}</el-radio>
          <el-radio  :label="false">{{$t('config.channel.disabled')}}</el-radio>
        </el-radio-group>
      </el-form-item>
      <span class="help-tips">*{{$t('configLazyLoad.robotSeven.robotText1')}}</span>
      <el-form-item :label="$t('configLazyLoad.robotSeven.robotText2')" class="padding-top">
        <el-radio-group v-model.trim="form.pushEnable" @change="changePushState">
          <el-radio label="1">{{$t('config.channel.enabled')}}</el-radio>
          <el-radio label="0">{{$t('config.channel.disabled')}}</el-radio>
        </el-radio-group>
        <el-input size="mini" v-model.trim="form.pushMsg" v-show="isPushMsg" :maxlength="30"></el-input>
      </el-form-item>
      <span class="help-tips">*{{$t('configLazyLoad.robotSeven.robotText3')}}</span>
      <el-form-item :label="$t('configLazyLoad.robotSeven.robotText4')" prop="excuse" class="padding-top">
        <div class="excuse_list">
          <el-row>
            <el-col :span="20">
              <div class="grid-content bg-purple">
                <span class="title">{{$t('configLazyLoad.robotSeven.robotText3', {num: form.excuse.length})}}</span>
              </div>
            </el-col>
            <!--<el-col :span="4">-->
              <!--<div class="grid-content bg-purple-light deleteAllExcuses" @click="deleteAllExcuses">-->
                <!--删除所有-->
              <!--</div>-->
            <!--</el-col>-->
          </el-row>
          <el-row v-for="(excuses, index) in form.excuse" class="excusesline">
            <el-col :span="1" class="excusesnum">{{index + 1}}、</el-col>
            <el-col :span="17" class="text">
              <div v-html="excuses" class="excusesText"></div>
            </el-col>
            <el-col :span="6" class="operate">
              <span @click="editExcuse(index, 'edit')">{{$t('sms.edit')}}</span>
              <span @click="deleteExcuse(index)" class="delete">{{$t('sms.del')}}</span>
            </el-col>
          </el-row>
          <el-button class="primary_btn addRelated" @click="addExcuse('add')" v-show="this.form.excuse.length === 5 ? false : true">{{$t('configLazyLoad.robotSeven.robotText6')}}</el-button>
        </div>
        <div class="editBox" v-show="isExcuses">
          <div id="robotInfo" class="unknown-question padding-top" >
          </div>
          <el-button type="primary" class="primary_btn saveExcuses" @click="saveExcuses">{{$t('public.save')}}</el-button>
          <span class="help-tips font12">（{{$t('configLazyLoad.robotSeven.robotText7')}}）</span>
        </div>
      </el-form-item>
      <!--<span class="help-tips">未知说辞最多可设置5个，且进行随机发送</span>-->
      <el-form-item class="padding-top">
        <el-button type="primary" @click="submitForm" class="fr primary_btn">{{$t('config.channel.saveSettings')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
  import Editor from 'wangeditor'
  import {filterXSS} from '@/utils/m7Utils'
  export default {
    name: 'robotInfo',
    data () {
      let validate2 = (rule, value, callback) => {
        if (value !== '') {
          if (value.length > 20) {
            callback(new Error(this.$t('configLazyLoad.robotSeven.lessThan20')))
          } else {
            callback()
          }
        }
      }
      return {
        form: {
          name: '',
          common: false,
          excuse: [],
          pushMsg: this.$t('configLazyLoad.robotSeven.replyNumber'),
          pushEnable: '1'
        },
        isExcuses: false,
        submitObj: {},
        editType: '',
        editIndex: 0,
        rules: {
          name: [
            {required: true, message: this.$t('validate.required'), trigger: 'blur'},
            {validator: validate2, trigger: 'blur'}
          ]
//          excuse: [
//            {required: true, message: this.$t('validate.required'), trigger: 'change'},
//            {validator: validate1, trigger: 'change'}
//          ]
        },
        editor: {},
        isPushMsg: true
      }
    },
    computed: {
    },
    methods: {
      changePushState (val) {
        if (val === '1') {
          this.isPushMsg = true
        } else {
          this.isPushMsg = false
        }
      },
      editExcuse (index, type) {
        this.isExcuses = true
        this.editor.txt.html(filterXSS(this.form.excuse[index]))
        this.editType = type
        this.editIndex = index
      },
      deleteExcuse (index) {
        this.$confirm(this.$t('configLazyLoad.robotSeven.unrecoverable'), this.$t('public.delete'), {
          confirmButtonText: this.$t('public.confirm'),
          cancelButtonText: this.$t('public.cancel'),
          cancelButtonClass: 'primary_btn',
          confirmButtonClass: 'primary_btn',
          type: 'warning'
        }).then(() => {
          this.form.excuse.splice(index, 1)
          this.$message({
            type: 'success',
            message: this.$t('agent.successDel')
          })
          this.isExcuses = false
        }).catch(() => {
          this.$message({
            type: 'info',
            message: this.$t('config.agent.cancelDel')
          })
        })
      },
      addExcuse (type) {
        this.isExcuses = true
        this.editor.txt.clear()
        this.editType = type
      },
      saveExcuses () {
        if (this.editor.txt.html() === '<p><br></p>' || this.editor.txt.text().replace(/&nbsp;/ig, '').replace(/\s+/g, '') === '') {
          this.$message({
            type: 'error',
            message: this.$t('configLazyLoad.robotSeven.notNull1')
          })
          return
        }
        if (this.editor.txt.text().length > 500) {
          this.$message({
            type: 'error',
            message: this.$t('configLazyLoad.robotSeven.noMoreThan500')
          })
          return
        }
        if (this.editType === 'add') {
          this.editIndex = ''
        }
        for (let j = 0; j < this.form.excuse.length; j++) {
          if (this.editIndex === j) {
            continue
          }
          if (this.editor.txt.html() === this.form.excuse[j]) {
            this.$message({
              message: this.$t('configLazyLoad.robotSeven.noRepeating'),
              type: 'error'
            })
            return
          }
        }
        if (this.editType === 'edit') {
          this.form.excuse[this.editIndex] = this.editor.txt.html()
        } else if (this.editType === 'add') {
          this.form.excuse.push(this.editor.txt.html())
        }
        this.isExcuses = false
      },
//      deleteAllExcuses () {
//        if (this.form.excuse.length === 0) {
//          this.$message({
//            type: 'error',
//            message: '没有说辞可删除!'
//          })
//          return
//        }
//        this.$confirm('您确定要删除所有吗?删除后不可恢复!', '删除', {
//          confirmButtonText: '确定',
//          cancelButtonText: '取消',
//          cancelButtonClass: 'primary_btn',
//          confirmButtonClass: 'primary_btn',
//          type: 'warning'
//        }).then(() => {
//          this.form.excuse = []
//          this.$message({
//            type: 'success',
//            message: '删除成功!'
//          })
//        }).catch(() => {
//          this.$message({
//            type: 'info',
//            message: '已取消删除'
//          })
//        })
//      },
      submitForm () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            if (this.form.pushEnable === '1') {
              if (this.form.pushMsg === '') {
                this.$message({
                  message: this.$t('configLazyLoad.robotSeven.notNull'),
                  type: 'error'
                })
                return
              }
            }
            if (this.form.excuse.length === 0) {
              this.$message({
                message: this.$t('configLazyLoad.robotSeven.atLeastOne'),
                type: 'error'
              })
              return
            }
            for (let j = 0; j < this.form.excuse.length; j++) {
              if (this.form.excuse[j + 1] === this.form.excuse[j] && j < this.form.excuse.length) {
                this.$message({
                  message: this.$t('configLazyLoad.robotSeven.noRepeating'),
                  type: 'error'
                })
                return
              }
            }
            this.$store.dispatch('robotInformation', this.form).then((rep) => {
              if (rep.success) {
                this.$message.success(this.$t('config.channel.configSuccess'))
              } else {
                this.$message.error(this.$t('qualityCheck.saveFali'))
              }
            })
          }
        })
      }
    },
    beforeMount () {
    },
    mounted () {
      this.$store.dispatch('robotInformationSel', {idle: ''}).then((resp) => {
        this.submitObj = resp.doc
        if (this.submitObj) {
          if (typeof this.submitObj.excuse === 'string') {
            let ex = this.submitObj.excuse
            this.submitObj.excuse = [ex]
          }
          for (let i in this.form) {
            this.form[i] = this.submitObj[i]
          }
        } else {
          this.form.name = this.$t('configLazyLoad.robotSeven.xiaoQi')
          this.form.common = true
          this.form.pushEnable = '1'
          this.form.pushMsg = this.$t('configLazyLoad.robotSeven.replyNumber')
          this.form.excuse = [this.$t('configLazyLoad.robotSeven.willNot')]
        }
        if (this.submitObj && !this.submitObj.pushEnable && this.submitObj.pushEnable !== '0') {
          this.form.pushMsg = this.$t('configLazyLoad.robotSeven.replyNumber')
          this.form.pushEnable = '1'
        }
        if (this.form.pushEnable === '0') {
          this.form.pushMsg = this.$t('configLazyLoad.robotSeven.replyNumber')
          this.isPushMsg = false
        } else {
          this.isPushMsg = true
          this.form.pushEnable = '1'
        }
        // xss处理
        this.form.excuse.forEach((item, index) => {
          this.form.excuse[index] = filterXSS(item)
        })
        this.editor = new Editor('#robotInfo')
        this.editor.config.menus = [
          'head',  // 标题
          'bold',  // 粗体
          'fontSize',  // 字号
          'fontName',  // 字体
          'italic',  // 斜体
          'underline',  // 下划线
          'strikeThrough',  // 删除线
          'foreColor',  // 文字颜色
          'backColor',  // 背景颜色
          'link',  // 插入链接
          'justify'  // 对齐方式
        ]
        this.editor.config.pasteTextHandle = filterXSS
        this.editor.config.fontNames = [ '微软雅黑', '宋体', '新宋体', '仿宋', '楷体', '黑体', 'Arial', 'Arial Black', 'Times New Roman', 'Courier New', 'Tahoma', 'Verdana' ]
//        editor.config.onchange = (html) => {
//          // html 即变化之后的内容
//          this.form.excuse.push(editor.txt.html())
//        }
        this.editor.create()
        let node = document.getElementById('robotInfo')
        if (node) {
          let node2 = node.getElementsByClassName('w-e-text-container')[0]
//          let menu = node.getElementsByClassName('w-e-menu')
          if (node2) {
            node2.style.zIndex = 10
          }
//          if (menu && menu.length > 0) {
//            for (let m = 0; m < menu.length; m++) {
//              menu[m].style.zIndex = 10
//            }
//          }
        }
      })
    }
  }
</script>
<style lang="stylus">
  .robotInfo
    .w-e-text-container
      height 150px!important
</style>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .form
    width 650px
    padding 20px
  .help-tips
    color $cf-gray4
  .padding-top
    padding-top 15px
  .operate
    text-align right
    span
      color $c-main
      margin-left 10px
      cursor pointer
    .delete
      color #fd6b6b
  .addRelated
    border-color $c-main
    color $c-main
    height 24px
    line-height 24px
    margin 20px 0 10px 20px
  .excusesnum,.excusesText,.operate
    line-height 16px
  .excuse_list
    margin-top 10px
    .title
      margin-bottom 10px
  .saveExcuses
    position absolute
    right 10px
    bottom 42px
    cursor pointer
    z-index 11
  .deleteAllExcuses
    color #fd6b6b
    text-align right
    cursor pointer
  .editBox
    position relative
    border-top 1px dashed #ccc
  .excusesline
    padding 3px
  #robotInfo
    .w-e-toolbar, .w-e-menu
      z-index 10
</style>
